<template>
  <view :class="{'is-animation': isAnimation, 'is-hide': isHide}" class="p-pop-x">
    <view class="box">
      <view class="dl">
        <view class="dt">恭喜您，获得今日最佳优惠</view>
        <view class="dd">
          现在下单，立享{{ detail.totalDiscountAmount }}元优惠
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config';

export default {
  name: 'PPop1',
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      audioSrc: config.static + '/images/ad.mp3',
      isAnimation: false,
      sum: 1,
      isHide: false,
      innerAudioContext: null,
      timeout: null
    };
  },
  mounted() {
    this.isAnimation = true;
    this.countdownA();

    // 加载音频
    this.innerAudioContext = uni.createInnerAudioContext();
    this.innerAudioContext.src = this.audioSrc;
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    handleCancel() {
      this.$emit('close');
      this.$XTrack('onDiscountPayCancelClick');
    },
    countdownA() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownA();
        } else {
          this.isHide = true;
          // 振动
          wx.vibrateLong();
          // 播放音频
          this.innerAudioContext.play();
          this.countdownB();
          this.$emit('ready');
        }
      }, 1000);
    },
    countdownB() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.$emit('submit');
        this.$XTrack('onDiscountPayClick');
      }, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    background-color: #000; height: 100vh; display: flex; align-items: center;
    .box{
      width: 750px; height: 400px; opacity:0; background: cdn('/images/bg_coupon.gif') no-repeat; background-size: cover; display: flex; align-items: center;
      .dl{ flex: 1; opacity:0; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff;}
      .dt{ font-size: 36px;}
      .dd{ font-size: 50px; padding-top: 20px;}
    }

    &.is-animation{
      .box{ opacity:0; animation: fadeInLeft .6s ease-in forwards;}
      .dl{ opacity:0; animation: fadeInLeft .6s .3s ease-in forwards;}
    }
    &.is-hide{
      animation: fadeOut .4s ease-in forwards;
      .box{ animation: fadeOutUp .4s ease-in forwards;}
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity:0;
      transform:translate3d(-100%, 0, 0)
    }
    to {
      opacity:1;
      transform:translateZ(0)
    }
  }
  @keyframes fadeOutUp {
     0% {
       opacity:1
     }
     to {
       opacity:0;
       transform:translate3d(0, -100%, 0)
     }
   }

  @keyframes fadeOut {
    0% {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
</style>
